<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@tag pageEncoding="UTF-8" isELIgnored="false"  %>
<%@attribute name="type"%>
<%@attribute name="update"%>
<%@attribute name="uploadUrl"%>
<%@attribute name="updateUrl"%>
<style>
    .imgDiv{
        float: left;width: 120px;height: 120px;border: 1px #cccccc solid; border-radius: 4px;text-align: center;color: #aaaaaa;
        margin: 0 10px 10px 0;
        padding: 2px;
    }

    .imgDiv img{
        width: 100%;height: 100%;border-radius: 4px;
    }

    .imgDiv .delete{
        position: absolute;top: 2px; right: 2px;background-color: #000000;filter:alpha(Opacity=80);-moz-opacity:0.8;opacity: 0.8;text-align: center;
    }

    .imgDiv .delete i{
        color: #ffffff; font-size: 20px;
    }
</style>

<div style="overflow: hidden;" id="annexImage">
    <div id="addButton" class="imgDiv">
        <p style="padding-top: 20px;"><i class="layui-icon layui-icon-add-1" style="font-size: 30px;"></i></p>
        <p>剩余<span id="remain" style="color: #FF5722">5</span>张</p>
    </div>
</div>

<div style="display: none">
    <form enctype="multipart/form-data">
        <input type="file" id="imageFile" name="imageFile" class="imgInput" style="display: none;"/>
    </form>
</div>
<script>
    $("#addButton").click(function (e) {
        $(".imgInput").click();
        e.preventDefault();
    });

    $(".imgInput").change(function (e) {
        var files = this.files;
        var file;
        if (files && files.length) {
            file = files[0];
            if (!/^image\/\w+/.test(file.type)) {
                tip("请选择图片文件");
                return;
            }
        }

        if(file == undefined) {
            return;
        }

        var formData = new FormData();
        formData.append("imageFile", document.getElementById("imageFile").files[0]);
        $.ajax({
            url:'${uploadUrl}',
            type: 'POST',
            cache: false,
            data: formData,
            processData : false,
            contentType : false,
            success : function(res) {
                let image = res.data;
                processImage(res.data);
                updateImage(1,image);
            },
            error : function(res) {
                tip("出错！！");
            }
        });
    });

    let imageNames="";
    function parseImageNames(imgs) {
        imageNames = imgs;
        if (imgs != "" && imgs != null) {
            $.each(imgs.split("|"), function (i,imageName) {
                if (imageName != "") {
                    processImage(imageName);
                }
            });
        }
    }

    function getImageNames() {
        return imageNames;
    }

    function processImage(imageName) {

        console.log(imageName);
        let child = "<div class='imgDiv' style='position: relative;'>" +
            "<img  src='${baseUrl}img/${type}/"+imageName+"' name='"+imageName+"'>" +
            "<div class='delete'><i class='layui-icon layui-icon-close'></i></div>" +
            "</div>";
        $("#annexImage").append(child);

        $("#annexImage .delete").unbind("click").click(function () {
            $(this).parents(".imgDiv").remove();
            let remain = parseInt($("#remain").html());
            $("#remain").html(remain + 1);
            $("#addButton").show();
            let imageName = $(this).parents(".imgDiv").find("img").attr("name");
            updateImage(2,imageName);
        });

        let remain = parseInt($("#remain").html());
        if (remain > 1) {
            $("#remain").html(remain-1);
        } else {
            $("#remain").html(0);
            $("#addButton").hide();
        }
    }

    function updateImage(flag,imageName) {
        <c:choose>
            <c:when test="${update=='true'}">
                let data = {
                    id:"${id}"
                };
                if (flag == 2){
                    data.image = imageNames.replace(imageName+"|", "");
                } else {
                    data.image = imageNames+imageName+"|";
                }
                post("${updateUrl}",data, function (res) {
                    if (res.code == 1){
                        if (flag == 2){
                            tip("删除附件图片成功");
                        }else {
                            tip("添加附件图片成功");
                        }
                        imageNames = data.image;
                    } else {
                        errTip(res.msg);
                    }
                });
            </c:when>

            <c:otherwise>
                if (flag == 2){
                    imageNames = imageNames.replace(imageName+"|", "");
                } else {
                    imageNames = imageNames+imageName+"|";
                }
            </c:otherwise>
        </c:choose>

    }
</script>